<template>
  <div class="talkingbook">
    <lunbo :pro="objArr.focusImages"></lunbo>
    <div class="nav">
      <van-grid :column-num="5">
        <van-grid-item
          v-for="(value, i) in objArr.tomatoes"
          :key="i"
          :icon="value.img"
          :text="value.name"
        />
      </van-grid>

      <van-sticky> </van-sticky>

      <div class="test">
        <van-collapse v-model="activeNames" accordion>
          <van-collapse-item
            v-for="(item, index) in objArr.moduleRankDatas"
            :key="index"
            :title="item.moduleInfo.displayName"
            :name="index"
          ><div>向右滑动查看更多<van-icon name="arrow" /></div>
            <div
              class="van-grid-box"
              v-for="(val, id) in objArr.moduleRankDatas[index]
                .albumBriefDetailInfos"
              :key="id"
            >
              <van-grid :column-num="1" icon-size="60" gutter="10">
                <van-grid-item
                  :icon="imgSrc + val.anchorInfo.logo"
                  :text="val.anchorInfo.nickname" 
                />
              </van-grid>
            </div>
          </van-collapse-item>
        </van-collapse>
      </div>
    </div>
  </div>
</template>

<script>
import lunbo from "../components/lunbo.vue";
export default {
  name: "talkingbook",
  data() {
    return {
      activeNames: "3",
      imgSrc: "//imagev2.xmcdn.com/",
      objArr: {
        focusImages: [],
        moduleRankDatas: [],
        tomatoes: [],
      },
    };
  },
  components: {
    lunbo,
  },
  created() {
    this.getNavData();
  },
  methods: {
    getNavData() {
      this.axios({
        methods: "get",
        url: "https://apis.netstart.cn/ximalaya/index/queryIndexCategoryTabContent?moduleKey=youshengshu",
      })
        .then((result) => {
          // console.log(result.data.data.moduleContent);
          this.objArr = result.data.data.moduleContent;
    // console.log(this.objArr.focusImages);

          // console.log(result.data.data.moduleContent.moduleRankDatas);
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>

<style lang="less" scoped>
.nav-item {
  img {
    width: 50px;
    height: 50px;
  }
}
.test {
  height: 800px;
  // background-color: yellow;
}
.van-grid-box {
  width: 100px;
  display: inline-block;
  
}
/deep/.van-collapse-item__content{
overflow-x: scroll;
  overflow-y: hidden;
  white-space: nowrap;
  height: 150px;
}
</style>